<template>
  <view>
    <view :style="{
        'padding-top': (properties.paddingTop===undefined?0:properties.paddingTop) +'px',
        'padding-bottom':  (properties.paddingBottom===undefined?0:properties.paddingBottom) +'px',
        'padding-right': (properties.paddingRight===undefined?0:properties.paddingRight) +'px',
        'padding-left': (properties.paddingLeft===undefined?0:properties.paddingLeft) +'px',
        backgroundColor: properties.background==undefined?'':properties.background,
        'margin-bottom': properties.marginBottom===undefined?'0px':properties.marginBottom +'px'
    }">
      <slot name="body"></slot>
    </view>
  </view>
</template>
<script>
const app = getApp();
// 分割线
export default {
  name: "PageBody",
  props: {
    properties: {
      type: Object,
      default: function () {
        return {
          background: 'white',
          pageMargin: 0,
          marginBottom: 0,
        }
      }
    },
    scrollTop: {
      type: Number,
      default: function () {
        return 0;
      }
    }
  },
  watch: {
    scrollTop: {
      handler(nVal, o) {
        // console.log("scrollTop",nVal)
        if (nVal !== null && nVal !== '') {
          this.scrollTop = nVal;
        }
      },
      immediate: true, // 正确设置
      deep: true // 如果需要深度监听对象内部的变化
    },
  },
  data() {
    return {
      old: {
        scrollTop: 0
      }
    }
  },
  methods: {

    upper: function (e) {
      console.log("到顶了", e)
    },

    lower: function (e) {
      console.log("到底了", e);
      this.$emit("scrolltolower", {})
    },

  },
  created() {

  },
  mounted() {
    // document.body.style.overflow = 'hidden'; // 禁止页面滚动
  },
  onReachBottom() {
    this.lower();
  }
}
</script>

<style scoped lang="scss">
</style>
